<style>
.album-box{ min-height: 330px;}
.album-list li{ float: left; width: 136px; margin:0 25px 10px 0;}
.album-border{ position: relative; border: 1px solid #ccc; padding: 4px;}
.album-pic{ display: block; width: 126px; height: 116px;}
.album-order{ height: 20px; margin-top: 4px;}
.count-small-box .input-text{ padding:0px 4px; height: 20px; font-size:12px; line-height:18px;}
.count-small-box .count{ width: 18px; height: 18px}
.count-small-box .count i{ border: 4px solid #fff; border-bottom-color: #656565}
.count-small-box .count-up{ height: 8px; padding: 0 4px 1px}
.count-small-box .count-down{height: 8px; padding: 1px 4px 0}
.count-small-box .count-down i{ border-bottom-color: #fff; border-top-color: #656565}
.album-list-name{ padding: 4px 0; line-height: 22px; text-align: center;}
.album-del{ position: absolute; right: -1px; top: -1px; width: 20px; height: 20px; display: none; cursor: pointer; background-color: rgba(0,0,0,0.5);}
.album-border:hover .album-del{ display: block;}

.album-list li.album-add{ width: 134px; height: 148px; border: 1px dashed #ccc; margin: 0; background-color: #f7f7f7; cursor: pointer;}
.album-add i{ display: block; width: 40px; height: 40px; margin: 40px auto 12px; background: url(http://img-dev.myscrmimg.cn/projects/qmyx/public/images/icon/icon_add.png) no-repeat; background-size: 40px 40px;}
.album-add span{ display: block; text-align: center;}

.album-list .checkboxBig{ position: absolute; right: -1px; top: -3px; top: -4px\0; }
.album-list .checkboxBig span{ padding-left: 16px;}
</style>
<div class="album-box mt15" id="app_photo_list">
    <script id="photo_list_tmpl" type="text/html">
    <ul class="album-list clearfix">
        {{each list as value i}}
        <li id="{{value.po_photo_appsId}}" class="js-photo-item">
            <div class="album-border">
                <img src="{{value.picurl}}" alt="" class="album-pic">
                <div class="album-order">
                    <div class="count-box fr count-small-box js-order" style="width:50px;" id="order_{{i+1}}" data-min-value="0" data-reg="^\d+$">
                        <input class="input-text" type="text" value="{{value.orders}}" placeholder="" maxlength="4">
                        <span class="count">
                            <span class="count-up"><i></i></span>
                            <span class="count-down"><i></i></span>
                        </span>
                    </div>
                    <span class="fr lh18">顺序：</span>
                </div>
                <span class="album-del"><i class="icon-op icon-op-del js-del permission p-500309-10-inline-block"></i></span>
            </div>
            <p class="album-list-name">{{value.title}}</p>
        </li>
        {{/each}}
        <li class="album-add js-sel-photo permission p-500309-10-block"><i></i><span class="c-blue">选择已有相册</span></li>
    </ul>
    </script>
</div>
<div><a href="javascript:;" class="fr btn permission p-500309-10-inline" id="btn_save">保存</a></div>

<!-- 选择已有相册 -->
<script type="text/html" id="sel_photo_div">
<div style="width:780px;padding:0 35px 10px;">
    <div class="lh30 f14">
        <span class="fl lh30">相册列表</span>
        <label class="checkboxBig fr c-orange">
            <input type="checkbox" id="cbAll" value="" name="cbAll">
            <span>全选</span>
        </label>
    </div>
    <div class="album-box" style="width:780px; overflow:hidden">
        <ul class="album-list clearfix" style="width:805px" id="album_list">
            <li>加载中...</li>
        </ul>
    </div>
    <!-- 分页代码 -->
    <div id="pager" class="pagination"></div>
</div>
</script>

<script id="sel_photo_tmpl" type="text/html">
{{each list as value i}}
<li>
    <div class="album-border cursor">
        <img src="{{value.picurl}}" alt="" class="album-pic">
        <label class="checkboxBig">
            <input type="checkbox" id="cb_{{i+1}}" value="{{value.po_photoId}}" name="cb">
            <span></span>
        </label>
    </div>
    <p class="album-list-name">{{value.title}}</p>
</li>
{{/each}}
</script>
            
<script type="text/javascript">
seajs.use(["jquery","service/config/building_photo","ui"], function ($,building_photo,ui){
    $(function(){
        building_photo.init();
    });
});
</script>